<template>
    <view class="warehouse-in-appoint">
		<view class="appoint-section font-26">
			<u-select title="仓库" placeholder="请选择" @click="openWarehousePicker" :value="appintForm.data.spckmc" labelWidth="160" :rules="appintForm.rules.spckmc"></u-select>
			<u-select title="进仓日期" placeholder="请选择" @click="openDatePicker" :value="appintForm.data.rcrq" labelWidth="160" :rules="appintForm.rules.rcrq"></u-select>
			<u-input title="车牌号" placeholder="填写车牌号" v-model="appintForm.data.dzzy6" labelWidth="160" :rules="appintForm.rules.dzzy6"></u-input>
			<u-input title="司机姓名" placeholder="填写司机姓名" v-model="appintForm.data.dzzy7" labelWidth="160"></u-input>
			<u-input title="联系电话" placeholder="填写联系电话" v-model="appintForm.data.dzzy8" labelWidth="160" type="tel"></u-input>
			<u-input title="身份证号" placeholder="填写身份证号" v-model="appintForm.data.dzzy10" labelWidth="160"></u-input>
			<u-input title="备注" placeholder="填写进仓备注" v-model="appintForm.data.dzbz" labelWidth="160" :border="false"></u-input>
		</view> 
		<view class="warehouse-in-appoint-top display-flex justify-between align-center">
			<view class="flex">
				<!-- <text>共</text>
				<text class="font-CE0C0C">3</text>
				<text>个记录，</text>
				<text class="font-CE0C0C">3000</text>
				<text> 件，</text>
				<text class="font-CE0C0C">30.600</text>
				<text>吨</text> -->
			   <view class="title">
					<text>进仓货物信息：</text>
				</view>
			</view>
			<button class="btn" @click="handleAdd">添加货物</button>
		</view>
		<view class="warehouse-in-appoint-list">
			<view class="section font-26" v-for="(item, index) in appintForm.data.inp" :key="index">
				<view class="title display-flex justify-between align-center">
					<text>{{ item.spzs}}</text>
					<view class="display-flex align-center" @click="handleEdit(index)">
						<image src="@/static/icons/edit_icon.png" color="#255FB6" class="edit-icon"/>
						<text class="font-255FB6">修改</text>
					</view>
				</view>
				<view class="content">
					<view class="item display-flex justify-between">
						<view class="flex">
							<text class="font-999999">纱支：</text>
							<text>{{ item.wpggA }}</text>
						</view>
						<view class="flex">
							<text class="font-999999">品牌：</text>
							<text>{{ item.spcd }}</text>
						</view>  
					</view>
					<view class="item display-flex justify-between">
						<view class="flex">
							<text class="font-999999">单重：</text>
							<text>{{ item.spjsl }}KG</text>
						</view>
						<view class="flex">
							<text class="font-999999">件数：</text>
							<text>{{ item.spjs }}</text>
						</view>  
					</view>
					<view class="item display-flex justify-between">
						<view class="flex">
							<text class="font-999999">重量：</text>
							<text>{{ item.spsl }}吨</text>
						</view>
						<view class="flex">
							<text class="font-999999">批号：</text>
							<text>{{ item.spbh }}</text>
						</view>  
					</view>
					<view class="item display-flex justify-between">
						<view class="flex">
							<text class="font-999999">柜号：</text>
							<text>{{ item.spgh }}</text>
						</view>
						<view display="pull-right display-flex align-center" @click="handleDelete(index)">
							<image src="@/static/icons/delete_icon.png" class="delete-icon"/>
							<text class="font-999999 ml-5">删除</text> 
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="warehouse-in-appoint-btn">
			<button class="btn app-primary-button" hover-class="app-primary-button-active" @click="onSubmit">提交进仓</button>
		</view>
		<u-popup :show="warehouseData.showPicker" title="请选择仓库" @close="openWarehousePicker">
			<template v-slot:content>
				<view class="select-warehouse15 display-flex flex-wrap">
				    <view v-for="(item, index) in warehouseData.list" :key="item.spckid" :class="warehouseData.active === index?'active item':'item'" @click="warehouseConfirm(item, index)">
				        <text>{{ item.spckmc }}</text>
				    </view>
				</view>
			</template>
		</u-popup>
		<u-date-picker :date="appintForm.data.rcrq" title="选择进仓日期" :show="warehouseInDateShow" @change="warehouseInDateConfirm" @close="openDatePicker"></u-date-picker>
    </view>
</template>
<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import type { Ref } from 'vue'
    import { stock } from '@/api'
    import { util, tip, storage } from '@/utils'
    import type { WarehouseData, AppintForm, PositionData} from '@/@type/warehouseIn'
    //import PeriodPicker from '@/components/periodPicker.vue'
	import { useAuthStore } from '@/store/auth'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	
	const authStore = useAuthStore()
	const user = authStore.getUser()
    const warehouseData: any = reactive({
        showPicker: false,
        loading: false,
        query: {
            khmcid:'',
            spckmc:''
        },
        params: {
            pageNum:1,
            pageSize:999
        },
        list: [],
        columns:[],
		active:'',
        total:0
    })
    const positionData: PositionData = reactive({
        query: {
            spckid:'',
        }
    })
    const warehouseInDateShow: Ref<boolean> = ref(false)
    const appintForm: any = reactive({
		rules:{
			spckmc:[{required: true, message:'请选择仓库'}],
			rcrq:[{required: true, message:'请选择进仓日期'}],
			dzzy6:[{required: true, message:'请填写车牌号'}]
		},
        data:{
            dzbz: '',
            dzid: 0,
            dzzy10: '',
            dzzy6: '',
            dzzy7: '',
            dzzy8: '',
            iszxf: '',
            iszyl: '',
            khlx: '商城',
            khmc: user.shopName,
            khmcid: user.shopId,
            spckid: '',
            spckmc: '',
            szkhmc: '',
            wbdh: '',
            spcwid:'',
            rcrq:util.formatDate(new Date()),
            inp:[]
        }
    })
	
	onLoad(() => {
		warehouse()
	})

    onShow(() => {
        getStorage()
    })

    function getStorage() {
        const data = storage.getLocalStorage('warehouseIn')
        if(data) {
            appintForm.data = reactive(data)
        }
    }

    function warehouse() {
        warehouseData.loading = true
        stock.getWarehouse(warehouseData.query,warehouseData.params).then((res: any) => {
            const data = res.rows
            warehouseData.list = data
            warehouseData.loading = false
        })
    }

    function warehouseInSelectPosition() {
        stock.getWarehouseInSelectPosition(positionData.query).then((res: any) => {
            appintForm.data.spcwid = res.data[0].liid
        })
    }

    function warehouseInSubmit() {
        const inp = appintForm.data.inp
        for(let i in inp) {
            inp[i].ssrqid = appintForm.data.rcrq
            inp[i].spcwid = appintForm.data.spcwid
        }
        stock.setWarehouseIn(appintForm.data).then(res => {
           tip.showToast('提交成功')
		   uni.$emit('warehouseInAdd')
		   uni.navigateBack({delta:1})
        })
    }

    function onSubmit() {
		const data = appintForm.data
		const rules = appintForm.rules
		for(let i in rules) {
			for(let j in rules[i] ) {
				if(rules[i][j].required === true && !data[i]) {
					return tip.showToast(rules[i][j].message)
				}
			}
		}
        if(appintForm.data.inp && appintForm.data.inp.length == 0) return tip.showToast('请添加货物')
        tip.confirm('是否确认提交？').then((res: any) => {
            warehouseInSubmit()
        })
    }

    function openWarehousePicker() {
        warehouseData.showPicker = !warehouseData.showPicker
    }
    function warehouseConfirm(item: any, index:number) {
        appintForm.data.spckmc = item.spckmc
        const spckid: string = item.spckid 
        appintForm.data.spckid = spckid
        positionData.query.spckid =   spckid
		warehouseData.active = index
        warehouseInSelectPosition()
        openWarehousePicker()
    }

    function openDatePicker() {
        warehouseInDateShow.value = !warehouseInDateShow.value
    }

    function warehouseInDateConfirm(value: string) {
        appintForm.data.rcrq = value
        openDatePicker()
    }

    function handleEdit(index: number) {
        uni.navigateTo({url:'/pages/storage/warehouseIn/edit?editIndex=' + index})
    }

    function handleDelete(index: number) {
        tip.confirm('是否确认删除货物？').then((res: any) => {
            let data = storage.getLocalStorage('warehouseIn')
            data.inp.splice(index,1)
            storage.setLocalStorage('warehouseIn', data)
            appintForm.data = data
        })
      
    }

    function handleAdd() {
        storage.setLocalStorage('warehouseIn', appintForm.data)
        uni.navigateTo({url:'/pages/storage/warehouseIn/add'})
    }
</script>
<style lang="scss" scoped>
    .warehouse-in-appoint {
		padding-bottom:150rpx;
        .appoint-section {
            margin:36rpx 30rpx;
            border-radius:10rpx;
			background-color: #fff;
			padding:0 30rpx;
        }
        &-top {
            padding:36rpx 30rpx;
            font-size:26rpx;
            .title {
                border-left:8rpx solid #CE0C0C;
                padding-left: 26rpx;
            }
            .btn {
                height:60rpx;
                border-radius: 8rpx;
				background-color:#CE0C0C;
				color:#fff;
				line-height:60rpx;
				font-size:24rpx;
            }
        }
        &-list {
            padding:0 30rpx;
            .section {
                border-radius: 10rpx;
                background-color:#fff;
                padding:26rpx 30rpx;
                margin-bottom:20rpx;
                .title {
                    padding-left:18rpx;
                    margin-bottom: 26rpx;
                    .edit-icon {
                        width:30rpx;
                        height:29rpx;
                        margin-right:9rpx;
                    }
                }
                .content {
                    border-top:1rpx solid #EEEEEE;
                    padding:26rpx 0 0;
                    .item {
                        padding-bottom:10rpx;
                    }
                    .delete-icon {
                        width:25rpx;
                        height:28rpx;
                    }
                }
            }
        } 
        &-btn {
            position:fixed;
            bottom:0;
            left:0;
            right:0;
            padding:20rpx 36rpx;
            .btn {
                border-radius: 10rpx;
            }
        }
        .select-warehouse15 {
            padding:15rpx 20rpx 30rpx;
            height: 550rpx;
            font-size: 26rpx;
            .item {
                min-width:135rpx;
                padding:0 20rpx;
                display:inline-block;
                height:60rpx;
                line-height: 60rpx;
                color:#999;
                text-align:center;
                border-radius:30rpx;
                border:1rpx solid #999;
                margin:15rpx;
                &.active {
                    color:#fff;
                    border:1rpx solid #255FB6;
                    background:#255FB6;
                }
            }
        }
    }
</style>